import ResizeObserver from 'resize-observer-polyfill';
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      tableContentStyle: {
        x: '100%',
        y: '100%',
      },
    };
  },
  methods: {
    resize() {
      const robserver = new ResizeObserver((entries) => {
        // 顶部按钮操作栏高度
        const bottomFixedShow = localStorage.getItem('isLayoutBottomShow');
        // 296  为本项目减去的头部高度，边距
        const toolbarAreaHeight = (this.$refs.toolbarAreaRef as any)?.offsetHeight ?? 0;
        for (const entry of entries) {
          const { height } = entry.contentRect;
          this.tableContentStyle['y'] = `calc(100vh - ${height}px - 274px - ${
            bottomFixedShow === 'true' ? 48 : 25
          }px - ${toolbarAreaHeight}px - ${this.extraHeight}px)`;
        }
      });
      robserver.observe(this.$refs.searchAreaRef as any);
    },
  },
});
